<template>
  <div ref="shoppingChart" class="chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ShoppingChart",
  data() {
    return {
      chart: null,
      timer: null,
      hoverTimer: null,
      chartData: {
        categories: [],
        lineData: [],
        barData: [],
        barsData: [],
        max: 500,
        interval: 50,
      },
    };
  },
  mounted() {
    this.initChart();
    this.fetchChartData();
    this.startTimer();
    this.startHoverSimulation();
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.hoverTimer) {
      clearInterval(this.hoverTimer);
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.shoppingChart);
      if (!this.chartData) {
        return;
      }

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          top: "70",
          left: "35",
          bottom: "20",
        },
        legend: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          padding: [10, 0, 0, 0],

        },
        xAxis: {
          type: "category",
          data: this.chartData.categories,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            color: "#fffff",
            fontSize: 15,
            interval: 0,
            formatter: function (value) {
              const maxLength = 4;
              if (value.length > maxLength) {
                return (
                  value.substring(0, maxLength) +
                  "\n" +
                  value.substring(maxLength)
                );
              }
              return value;
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位/件",
          min: 0,
          // max: 500,
          // interval: 50,
          axisLabel: {
            color: "#fff",
            fontSize: 18,
            interval: 0,
          },
        },
        series: [
          {
            name: "本院受理",
            type: "bar",
            color: "#FFCC00",
            data: this.chartData.barData,
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#148BF0" },
                { offset: 1, color: "#031A35" },
              ]),
            },
            label: {
              show: true,
              position: "inside",
              offset: [0, 0], // 调整这个值以精确定位文本
              fontSize: 12,
              color: "#fff",
            },
          },
          {
            name: "本院办结",
            type: "bar",
            color: "rgba(255,105,0,1)",
            data: this.chartData.barsData,
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#14FDFE" },
                { offset: 1, color: "#031A34" },
              ]),
            },
            label: {
              show: true,
              position: "inside",
              offset: [0, -15], // 调整这个值以精确定位文本
              fontSize: 12,
              color: "#fff",
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
    fetchChartData() {
      this.$axios
        .get("/api/screen/volumeHandling")
        .then((res) => {
          const data = res.data.data;
          this.chartData = {
            categories: data.categories || [],
            lineData: data.lineData || [],
            barData: data.barData || [],
            barsData: data.barsData || [],

          };
          this.initChart()  ;
          this.updateChart();
        })
        .catch((error) => {
          console.error("Failed to fetch chart data:", error);
        });
    },
    updateChart() {
      this.chart.setOption({
        xAxis: {
          data: this.chartData.categories,
          axisLabel: {
            color: "#fff",
            fontSize: 9,
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#fff",
            padding: [15, 30, 5, 3],
          },
          axisLabel: {
            color: "#fff",
            fontSize: 9,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
        series: [
          {
            name: "本院受理",
            type: "bar",
            color: "#FFCC00",
            data: this.chartData.barData,
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#148BF0" },
                { offset: 1, color: "#031A35" },
              ]),
            },
            label: {
              show: true,
              position: "inside",
              offset: [0, 0], // 调整这个值以精确定位文本
              fontSize: 12,
              color: "#fff",
            },
          },
          {
            name: "本院办结",
            type: "bar",
            color: "rgba(255,105,0,1)",
            data: this.chartData.barsData,
            symbolSize: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#14FDFE" },
                { offset: 1, color: "#031A34" },
              ]),
            },
            label: {
              show: true,
              position: "inside",
              offset: [0, -15], // 调整这个值以精确定位文本
              fontSize: 12,
              color: "#fff",
            },
          },
        ],
      });
    },
    startTimer() {
      this.updateChart();
      this.timer = setInterval(this.fetchChartData, 200000);
    },
    generateMarkPointData(data) {
      // return data.map((item, index) => {
      //   return { coord: [index, item], value: item };
      // });
      return data.map((item, index) => {
        return item > 0 ? { coord: [index, item], value: item } : null;
      }).filter(Boolean);
    },
    startHoverSimulation() {
      let currentIndex = 0;
      this.hoverTimer = setInterval(() => {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });

        currentIndex++;
        if (currentIndex >= this.chartData.lineData.length) {
          currentIndex = 0;
        }
      }, 2000);
    },
  },
};
</script>

<style scoped>
.chart {
  width: 520px;
  height: 240px;
}
</style>
